<template>
    <div class="total_order_radio">
        <div class="radio" :style="'background: conic-gradient(#5A91F4 0%, #5A91F4 ' + rate + '%, #F1F1F1 ' + rate + '%, #F1F1F1 100%)'">
            <div class="radio_content">
                <div class="content_detail">
                    <div class="radio_year">
                        <div class="radio_year_button" @click="uploadTime">
                            {{year}}
                            <el-date-picker
                                v-model="chooseYear"
                                type="year"
                                ref="tiemPick"
                                :clearable="false"
                                @change="changeYear"
                                class="timnePickCSS"
                                placeholder="">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="radio_title">年度签单总额</div>
                    <div class="total_order_price">
                        <div class="price">
                            {{dataMsg.signYearTotalPrice}}
                        </div>
                        <div class="price_unit">
                            (万元)
                        </div>
                    </div>
                    <div class="radio_title">目标年度签单总额</div>
                    <div class="total_order_price">
                        <div class="price">
                            {{dataMsg.planSignYearTotalPrice}}
                        </div>
                        <div class="price_unit">
                            (万元)
                        </div>
                    </div>
                    <div class="finish_rate">
                        <div class="finish_rate_name">
                            完成率：
                        </div>
                        <div class="finish_rate_value">
                            {{finishRate}}%
                        </div>
                    </div>
                    <div class="inside_value">内部货值</div>
                    <div class="inside_value_price">
                        <div class="price">
                            {{dataMsg.innerYearTotalPrice}}
                        </div>
                        <div class="price_unit">
                            (万元)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import API from "@/api/apiHome";
export default {
    name: "TotalOrderdRadio",
    components: {
    },
    watch: {
        finishRate(val){
            if(val){
                this.setGradient()
            }
        },
        '$route': function (to, from) {
            this.getMsg()
        }
    },
    data() {
        return {
            finishRate: 98.9,
            rate: 0,
            chooseYear: new Date(),
            year: new Date().getFullYear(),
            dataMsg: {},
        };
    },
    created() {
        this.getMsg()
    },
    methods: {
        setGradient(){
            this.rate = this.finishRate
        },
        uploadTime() {
            if (this.$refs.tiemPick) this.$refs.tiemPick.focus();
        },
        changeYear(){
            this.year = this.chooseYear.getFullYear()
            // this.finishRate = (Math.random() * 100).toFixed(1)
            this.getMsg()
        },
        getMsg() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                time: this.chooseYear.getTime()
            };
            API.getHomeYear(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    let data = res.data
                    this.finishRate = ((data.signYearTotalPrice / data.planSignYearTotalPrice) * 100).toFixed(1)
                    data.signYearTotalPrice = (data.signYearTotalPrice / 10000).toFixed(2)
                    data.planSignYearTotalPrice = (data.planSignYearTotalPrice / 10000).toFixed(2)
                    data.innerYearTotalPrice = (data.innerYearTotalPrice / 10000).toFixed(2)
                    this.setGradient()
                    this.dataMsg = data;
                    this.tableLoading = false;
                }
            });
        },
    }
};
</script>
<style scoped>
.total_order_radio{
    width: 100%;
}
.radio{
    width: 370px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border-radius: 100%;
    height: 370px;
    position: relative;
    /* box-shadow: 5px 5px 5px 5px #009878; */
	/* background: conic-gradient(#009878 0%, #009878 70%, #1d335c 70%, #1d335c 100%); */
    /* -webkit-mask: radial-gradient(transparent 150px, #000 45px); */
}
.radio_content{
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    background-color: white;
    width: 300px;
    margin: 0 auto;
    border-radius: 100%;
    height: 300px;
}
.content_detail{
    position: absolute;
    width: 100%;
    margin: 25px 0;
}
.radio_year{
    display: flex;
    justify-content: center;
}
.radio_title{
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
}
.total_order_price{
    padding-top: 10px;
    display: flex;
    justify-content: center;
}
.price{
    display: flex;
    align-items: flex-end;
    color: red;
    font-size: 30px;
    font-weight: bold;
}
.price_unit{
    color: black;
    font-size: 15px;
    display: flex;
    align-items: flex-end;
    font-weight: bold;
    margin-bottom: 7px;
}
.finish_rate{
    display: flex;
    justify-content: center;
    font-size: 25px;
}
.finish_rate_name{
    font-weight: bold;
}
.inside_value{
    display: flex;
    justify-content: center;
    font-size: 25px;
}
.inside_value_price{
    font-size: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
}
.radio_year_button{
    cursor: pointer;
    color: rgb(91, 156, 253);
    position: relative;
    font-size: 30px;
}
.timnePickCSS{
    position: absolute;
    z-index: -1;
    width: 0;
    left: -12%;
    top: -10%;
    height: 15px;
}
</style>